<template>
  <div>
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="roleVO" class="demo-form-inline">
          <el-form-item label="角色名称"  label-width="70px">
            <el-input v-model="roleVO.roleName" placeholder="请输入角色名" clearable></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 10px">
            <el-button type="primary" icon="el-icon-refresh" @click="resertroleVO">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="findRoleListM">查询</el-button>
<!--            <el-button type="success" icon="el-icon-plus" @click="show" v-if="" v-has-permission="'role:add'">添加</el-button>-->
            <el-button type="success" icon="el-icon-plus" @click="show">添加</el-button>
            <el-button type="warning" icon="el-icon-edit" @click="show1(roleId)">编辑</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--表格内容-->
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        :data="roleList"
        border
        style="width: 100%"
        max-height="400px"
        @selection-change="handleSelectionChange"
        @row-click="updateThisRoleId"
      >
        <el-table-column
          id=""
          type="selection"
          prop="id"
          label="全选"
          width="50">
        </el-table-column>
        <el-table-column
          prop="id"
          label="#"
          width="50">
        </el-table-column>
        <el-table-column
          prop="roleName"
          label="角色名称"
          width="110">
        </el-table-column>
        <el-table-column
          sortable
          prop="remark"
          label="角色详情"
          width="180">
        </el-table-column>
        <el-table-column
          sortable
          prop="createTime"
          label="创建时间"
          width="150">
        </el-table-column>
        <el-table-column
          prop="status"
          label="是否禁用"
          width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status == 1"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="show1(scope.row.id)"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteRole(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=currentPage
        :page-sizes="[6, 10, 20, 30]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
      <RoleEdit
        :updateVisible="updateVisible"
        :updateRoleVO = "updateRoleVO"
        @changeShow="showAddOrUpdate"
        @closeEdit="closeEdit"
        :menus="menus"
        :permissions="permissions"
        :ownMunuIds="ownMunuIds"
        :ownPermissionIds="ownPermissionIds"
        :userList="userList"
      >
      </RoleEdit>
      <RoleAdd
        :addVisible="addVisible"
        @changeShowAdd="changeShowAdd"
        :menus="menus"
        :permissions="permissions"
        @findRoleListM="findRoleListM"
      >
      </RoleAdd>
    </el-card>
  </div>
</template>

<script>
import {findRoleList} from '@/api/role'
import {findRoleById} from '@/api/role'
import RoleEdit from '@/views/roles/RoleEdit'
import {findMenuAndPermissionAll} from '@/api/menu'
import {findMenuAndPermissionByUserId} from '@/api/role'
import {findUserByRoleId} from '@/api/role'
import UserAdd from '@/views/users/UserAdd'
import RoleAdd from '@/views/roles/RoleAdd'
import {deleteRoleByRoleId} from '@/api/role'
import { deleteUsers } from '@/api/users'

export default {
  name: 'Role',
  components:{
    RoleAdd,
    RoleEdit
  },
  data(){
    return{
      currentPage: 1,
      pageSize: 6,
      total : 100,
      roleVO:{},
      roleList:[],
      roleId:'',
      multipleSelection:[],
      updateRoleVO:{},
      updateVisible:false,
      addVisible:false,
      ownMunuIds:[],
      ownPermissionIds:[],
      menus:[],
      permissions:[],
      arr:[],
      userList:[],
    }
  },
  created () {
   this.findRoleListM()
  },
  methods:{
    findRoleListM(){
      console.log("findRoleListM")
      findRoleList(this.currentPage,this.pageSize,this.roleVO).then(res =>{
        this.roleList = res.data.data
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.findRoleListM();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.findRoleListM();
    },
    resertroleVO(){
      this.roleVO = {}
    },
    getroleList(){

    },
    show(){
      findMenuAndPermissionAll().then(res => {
        if(res.data.data.menuList != null && res.data.data.menuList.length > 0){
          this.menus = res.data.data.menuList
        }
        if(res.data.data.permissions != null && res.data.data.permissions.length > 0){
          this.permissions = res.data.data.permissions
        }
      },error => {
        return this.$message.error('角色操作失败:'+ error.msg)
      })
      this.addVisible =true
    },
    show1(RoleId){
      if(RoleId == null || RoleId == ''){
        const h = this.$createElement;
        this.$notify({
          title: '请选择一条数据',
          message: h('i', { style: 'color: red' }, '请选择一个用户')
        });
      }else {
        //根据角色Id 查询角色相关信息
        findRoleById(RoleId).then(res => {
          console.log(res.data.code)
          if(res.data.code != 200){
            return this.$message.error('角色操作失败:')
          }
          this.updateRoleVO = res.data.data
          console.log("this.updateUserVO")
          this.updateVisible = true
          //根据角色Id 查询角色拥有的菜单和权限
          findMenuAndPermissionByUserId(RoleId).then(res => {
            if(res.data.data.menuList != null && res.data.data.menuList.length > 0){
              this.ownMunuIds = this.changeTree(res.data.data.menuList)
            }
            if(res.data.data.permissions != null && res.data.data.permissions.length > 0){
              res.data.data.permissions.map((item)=>
                this.ownPermissionIds.push(item.id)
              )
            }
            //查询所有角色和权限
            findMenuAndPermissionAll().then(res => {
              if(res.data.data.menuList != null && res.data.data.menuList.length > 0){
                this.menus = res.data.data.menuList
              }
              if(res.data.data.permissions != null && res.data.data.permissions.length > 0){
                this.permissions = res.data.data.permissions
              }
              //根据角色Id查询拥有该角色的用户
              findUserByRoleId(RoleId).then(res => {
                this.userList = res.data.data
              },error => {
                return this.$message.error('角色操作失败:'+ error.msg)
              })
            },error => {
              return this.$message.error('角色操作失败:'+ error.msg)
            })
          },error => {
            return this.$message.error('角色操作失败:'+ error.msg)
          })
        },error => {
          console.log(error)
          return this.$message.error('角色操作失败:'+ error.msg)
        })
      }
    },
    closeEdit(data){
      console.log("closeEdit")
      this.ownMunuIds=[],
      this.ownPermissionIds=[]
      this.menus=[]
      this.permissions=[]
      this.arr=[]
    },
    changeTree(val){
      if (val.length !== 0) {
        let hasSon = false;
        val.forEach(item => {
            if (item.children.length > 0) {
              hasSon =true
              this.changeTree(item.children)
            }
            if (!hasSon) {
               this.arr.push(item.id);
             }

          });
      }
      return this.arr;
    },
    getDisabled(data) {
      data.forEach(item => {
        if (item.children) {
          item.disabled = true;
          this.getDisabled(item.children)
        }
        this.treeData = data;
      });
    },
    showUpdate(data){
      this.getroleList()
      if(data === 'false'){
        this.updateVisible =false
      }else{
        this.updateVisible =true
      }
    },
    handleSelectionChange(val) {
      console.log("handleSelectionChange")
      this.multipleSelection = val;
    },
    updateThisRoleId(event){
      this.roleId = event.id
    },
    //监听 子组件弹窗关闭后触发  由子组件调用
    showAddOrUpdate(data){
      this.getroleList()
      if(data === 'false'){
        this.updateVisible =false
        this.roleId=''
      }else{
        this.updateVisible =true
      }
    },
    changeShowAdd(data){
      this.getroleList()
      if(data === 'false'){
        this.addVisible =false
        this.roleId=''
      }else{
        this.addVisible =true
      }
    },
    deleteRole(roleId){
      this.$confirm('此操作将永久删除该角色信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRoleByRoleId(roleId).then(res =>{
          this.findRoleListM()
          return this.$message.error(res.data.msg)
        })
      });
    }
  }
}
</script>

<style scoped>

</style>
